.hero
  background-image: url("@/image/hero/1_1920.jpg")
  background-repeat: no-repeat
  background-size: cover
  background-position: center
  &__container
    padding-top: 241px
    padding-bottom: 122px
  &__content
    max-width: 597px
    min-height: 436.5px
  &__title
    margin: 0
    margin-bottom: 18px
    font-weight: 700
    font-size: 71.5px
    line-height: 82.8px
    color: $white
  &__descr
    margin-bottom: 118px
    font-weight: 700
    font-size: 18px
    line-height: 30px
    color: $white
  &__btn
    padding: 22.5px 35px
    font-weight: 700
    font-size: 18px
    border-radius: 100px
    background-color: $colorPurpleDefault
    color: $white
  &__btn::before
    content: ""
    position: absolute
    top: -6px
    bottom: -6px
    left: -6px
    right: -6px
    border: 2px solid #C283F3
    border-radius: 100px
    opacity: 0
    transition: box-shadow .2s ease-in-out
  &__btn:focus-visible
    outline: none
  &__btn:focus-visible:not(:hover)::before
    opacity: 1
  &__btn:hover
    -webkit-box-shadow: inset 0 0 0 3px $colorLightPurple
    box-shadow: inset 0 0 0 3px $colorLightPurple
  &__btn:active
    background-color: $colorDarkPurple
    -webkit-box-shadow: inset 0 0 0 3px $colorLightPurple
    box-shadow: inset 0 0 0 3px $colorLightPurple

@media (max-width: 1420px)
  .hero__container
    min-height: 768px
    padding-top: 213px
    padding-bottom: 114px

  .hero__title
    margin-bottom: 12px

  .hero__descr
    margin-bottom: 158px

  .hero__content
    max-width: 661px

@media (max-width: 687px)
  .hero__container
    min-height: 356px
    padding: 78px 22px 42px 22px

  .hero__content
    min-height: 232px
    width: 100%
    display: flex
    flex-direction: column
    align-items: center
    justify-content: space-between

  .hero__title
    margin-bottom: 13px
    text-align: center
    font-size: 32px
    line-height: 36.8px

  .hero__descr
    margin-bottom: auto
    text-align: center
    font-weight: 400
    font-size: 12px
    line-height: 16.34px

  .hero__btn
    padding: 13px 18.13px
    font-size: 12px
